<div class="dux-page-header uk-clearfix">
    <div class="page-title">
        <a class="uk-button uk-button-primary" href="{url('index')}"> 模板列表</a>
    </div>
    <div class="page-action">
        <a class="uk-button uk-button-danger" href="javascript:location.reload();"><i class="fa fa-refresh"></i></a>
    </div>
</div>
<div class="uk-margin-top">
    <div class="uk-card uk-card-default uk-card-small dux-panel">
        <div class="uk-card-header">{$assignName}模板</div>
        <div class="uk-card-body">
            <form class="dux-form uk-form   uk-form-horizontal " data-dux="form-bind" method="post">
                <fieldset>
                    <div class="uk-form-group">
                        <label class=" uk-form-label">模板名称</label>
                        <div class="uk-form-controls">
                            <input type="text" name="name" value="{$info.name}" placeholder="请输入模板名称" required>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">首重默认</label>
                        <div class="uk-form-controls" data-dux="form-location">
                            <div class="uk-grid">
                                <div class="uk-width-1-2@m">
                                    <div class="uk-input-group">
                                        <input type="number" class="uk-form-field" name="first_weight"
                                               value="{$info.first_weight ? $info.first_weight : 1000}" min="500">
                                        <span class="uk-input-group-label">克</span>
                                    </div>
                                </div>
                                <div class="uk-width-1-2@m">
                                    <div class="uk-input-group">
                                        <input type="text" class="uk-form-field" name="first_price"
                                               value="{$info.first_price ? $info.first_price : '0.00'}">
                                        <span class="uk-input-group-label">元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">续重默认</label>
                        <div class="uk-form-controls" data-dux="form-location">
                            <div class="uk-grid">
                                <div class="uk-width-1-2@m">

                                    <div class="uk-input-group">
                                        <input type="number" class="uk-form-field" name="second_weight"
                                               value="{$info.first_weight ? $info.first_weight : 1000}" min="500">
                                        <span class="uk-input-group-label">克</span>
                                    </div>
                                </div>
                                <div class="uk-width-1-2@m">
                                    <div class="uk-input-group">
                                        <input type="text" class="uk-form-field" name="second_price"
                                               value="{$info.second_price ? $info.second_price : '0.00'}">
                                        <span class="uk-input-group-label">元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">保价状态</label>
                        <div class="uk-form-controls">
                            <div>
                                <select name="support_status" data-dux="form-select" required>
                                    <option value="1" <!--if{$info['support_status']}--> selected <!--{/id}-->
                                    >使用</option>
                                    <option value="0" <!--if{!$info['support_status']}--> selected <!--{/id}-->
                                    >不使用</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">保价费率</label>
                        <div class="uk-form-controls">
                            <div class="uk-input-group">
                                <input type="text" class="uk-form-field" name="support_rate"
                                       value="{$info.support_rate ? $info.support_rate : '0.00'}">
                                <span class="uk-input-group-label">%</span>
                            </div>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">最低保费</label>
                        <div class="uk-form-controls">
                            <div class="uk-input-group">
                                <input type="text" class="uk-form-field" name="support_price"
                                       value="{$info.support_price ? $info.support_price : '0.00'}">
                                <span class="uk-input-group-label">元</span>
                            </div>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">配送地区</label>
                        <div class="uk-form-controls">
                            <div class="uk-input-group">
                                <div class="uk-margin-bottom">
                                    <button class="uk-button uk-button-primary" type="button" id="add-area">增加地区</button>
                                </div>
                            </div>
                            <table class="uk-table  uk-table-responsive  uk-table-striped uk-table-hover uk-table-middle dux-table dux-table-dialog">
                                <thead>
                                <tr>
                                    <th width="120">首重费用</th>
                                    <th width="120">续重费用</th>
                                    <th>地区</th>
                                    <th width="80" class="uk-text-center">管理</th>
                                </tr>
                                </thead>
                                <tbody class="js-data-list">
                                    <!--if{$areaData}-->
                                        <!--loop{$areaData as $key => $vo}-->
                                            <tr id="area_{$key}">
                                                <td><input type="text" name="area[first_price][]" value="{$vo.first_price}"></td>
                                                <td><input type="text" name="area[second_price][]" value="{$vo.second_price}"></td>
                                                <td>
                                                    <a href="javascript:;" class="sel-area">选择地区</a>
                                                    <span class="area">{$vo.area}</span>
                                                    <input type="hidden" name="area[area][]" value="{$vo.area}">
                                                </td>
                                                <td class="uk-text-center">
                                                    <a href="javascript:;" class="uk-button uk-button-danger uk-button-small js-del"><i class="fa fa-remove"></i></a>
                                                </td>
                                            </tr>
                                        <!--{/loop}-->
                                    <!--{/if}-->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="uk-form-group">
                        <div class="uk-form-controls">
                            <input type="hidden" name="delivery_id" value="{$info.delivery_id}">
                            <button class="uk-button uk-button-primary" type="submit" disabled>保存</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

<script id="tpl-area" type="text/html">
    <tr id="area_{{ d.i }}">
        <td><input type="text" name="area[first_price][]" value="0.00"></td>
        <td><input type="text" name="area[second_price][]" value="0.00"></td>
        <td>
            <a href="javascript:;" class="sel-area">选择地区</a>
            <span class="area"></span>
            <input type="hidden" name="area[area][]" value="">
        </td>
        <td class="uk-text-center">
            <a href="javascript:;" class="uk-button uk-button-danger uk-button-small js-del"><i class="fa fa-remove"></i></a>
        </td>
    </tr>
</script>

<script>
    Do('base', 'tpl', 'dialog', function () {
        var i = 1;
        $('#add-area').on('click', function () {
            var gettpl = $('#tpl-area').html();
            i++;
            laytpl(gettpl).render({i: i}, function (html) {
                $('.js-data-list').append(html);
            });
        });

        $('.js-data-list').on('click', '.js-del', function() {
            $(this).parents('tr').remove();
        });

        $('.js-data-list').on('click', '.sel-area', function() {
            var id = $(this).parents('tr').attr('id');
            dialog.open('', {
                title : '地区选择',
                height: '360px',
                url : '{url("area")}?id=' + id
            });
        });

        window.addArea = function (id, data) {
            var layout = $('#'+ id);
            layout.find('.area').text(data);
            layout.find('.area').next('input').val(data);
        }
    });
</script>